<template>
  <el-form-item
    prop="code"
    :label="t('cms.model.field.code')"
    :rules="{ required: true, message: () => t('common.required') }"
  >
    <el-input :readonly="!field.custom" v-model="field.code" maxlength="50" />
  </el-form-item>
  <el-form-item
    prop="name"
    :label="t('cms.model.field.name')"
    :rules="{ required: true, message: () => t('common.required') }"
  >
    <el-input v-model="field.name" maxlength="50" />
  </el-form-item>
  <el-form-item prop="double" :label="t('cms.model.field.double')">
    <el-switch v-model="field.double" />
  </el-form-item>
  <el-form-item prop="required" :label="t('cms.model.field.required')">
    <el-switch v-model="field.required" />
  </el-form-item>
  <template
    v-if="
      [
        'text',
        'textarea',
        'number',
        'select',
        'multipleSelect',
        'videoUpload',
        'audioUpload',
        'fileUpload',
        'editor'
      ].includes(field.type)
    "
  >
    <el-form-item prop="placeholder" :label="t('cms.model.field.placeholder')">
      <el-input v-model="field.placeholder" maxlength="100" />
    </el-form-item>
  </template>
  <template v-if="['text', 'textarea'].includes(field.type)">
    <el-form-item prop="defaultValue" :label="t('cms.model.field.defaultValue')">
      <el-input v-model="field.defaultValue" maxlength="100" />
    </el-form-item>
    <el-form-item prop="minlength" :label="t('cms.model.field.minlength')">
      <el-input-number v-model="field.minlength" :min="1" />
    </el-form-item>
    <el-form-item prop="maxlength" :label="t('cms.model.field.maxlength')">
      <el-input-number v-model="field.maxlength" :min="1" />
    </el-form-item>
  </template>
  <template v-if="['textarea'].includes(field.type)">
    <el-form-item prop="rows" :label="t('cms.model.field.rows')">
      <el-input-number v-model="field.rows" />
    </el-form-item>
  </template>
  <template v-if="['number', 'slider'].includes(field.type)">
    <el-form-item prop="defaultValue" :label="t('cms.model.field.defaultValue')">
      <el-input-number v-model="field.defaultValue" :min="field.min" :max="field.max" />
    </el-form-item>
    <el-form-item prop="min" :label="t('cms.model.field.min')">
      <el-input-number v-model="field.min" />
    </el-form-item>
    <el-form-item prop="max" :label="t('cms.model.field.max')">
      <el-input-number v-model="field.max" />
    </el-form-item>
    <el-form-item prop="step" :label="t('cms.model.field.step')">
      <el-input-number v-model="field.step" />
    </el-form-item>
  </template>
  <template v-if="['number'].includes(field.type)">
    <el-form-item prop="precision" :label="t('cms.model.field.precision')">
      <el-input-number v-model="field.precision" :precision="0" :min="0" :max="4" />
    </el-form-item>
  </template>
  <template v-if="['slider'].includes(field.type)">
    <el-form-item prop="showInput" :label="t('cms.model.field.showInput')">
      <el-switch v-model="field.showInput" />
    </el-form-item>
  </template>
  <template v-if="['date'].includes(field.type)">
    <el-form-item prop="dateType" :label="t('cms.model.field.dateType.label')">
      <el-select v-model="field.dateType">
        <el-option
          v-for="n in ['date', 'datetime']"
          :key="n"
          :label="t(`cms.model.field.dateType.${n}`)"
          :value="n"
        />
      </el-select>
    </el-form-item>
  </template>
  <template v-if="['color'].includes(field.type)">
    <el-form-item prop="defaultValue" :label="t('cms.model.field.defaultValue')">
      <el-color-picker v-model="field.defaultValue" />
    </el-form-item>
  </template>
  <template v-if="['switch'].includes(field.type)">
    <el-form-item prop="defaultValue" :label="t('cms.model.field.defaultValue')">
      <el-switch
        v-model="field.defaultValue"
        :active-value="field.activeValue"
        :inactive-value="field.inactiveValue"
      />
    </el-form-item>
  </template>
  <template v-if="['radio', 'checkbox'].includes(field.type)">
    <el-form-item prop="checkStyle" :label="t('cms.model.field.checkStyle.label')">
      <el-radio-group v-model="field.checkStyle">
        <el-radio-button v-for="n in ['default', 'button']" :key="n" :label="n">{{
          t(`cms.model.field.checkStyle.${n}`)
        }}</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </template>
  <template v-if="['select', 'multipleSelect'].includes(field.type)">
    <el-form-item prop="clearable" :label="t('cms.model.field.clearable')">
      <el-switch v-model="field.clearable" />
    </el-form-item>
  </template>
  <template v-if="['radio', 'checkbox', 'select', 'multipleSelect'].includes(field.type)">
    <el-form-item
      prop="dictType"
      :label="t('cms.model.field.dictType')"
      :rules="{ required: true, message: () => t('common.required') }"
    >
      <el-select v-model="field.dictType" class="w-full" @change="(dictType) => dictTypeChange()">
        <el-option
          v-for="item in dictTypeList"
          :key="item.id"
          :value="item.type"
          :label="`${item.name}`"
        />
      </el-select>
    </el-form-item>
  </template>
  <template v-if="['radio', 'select'].includes(field.type)">
    <el-form-item prop="defaultValue" :label="t('cms.model.field.defaultValue')">
      <el-select
        v-model="field.defaultValueKey"
        clearable
        class="w-full"
        @change="(val) => (field.defaultValue = dictList.find((item) => item.value === val)?.label)"
      >
        <el-option
          v-for="item in dictList"
          :key="item.id"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
  </template>
  <template v-if="['checkbox', 'multipleSelect'].includes(field.type)">
    <el-form-item prop="defaultValue" :label="t('cms.model.field.defaultValue')">
      <el-select
        v-model="field.defaultValueKey"
        clearable
        class="w-full"
        multiple
        @change="
          (val) =>
            (field.defaultValue = dictList
              .filter((item) => val.indexOf(item.value) !== -1)
              .map((item) => item.label))
        "
      >
        <el-option
          v-for="item in dictList"
          :key="item.id"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
  </template>
  <template v-if="['imageUpload'].includes(field.type)">
    <el-form-item prop="imageWidth" :label="t('cms.model.field.imageWidth')">
      <el-input-number v-model="field.imageWidth" :min="1" :max="65535" />
    </el-form-item>
    <el-form-item prop="imageHeight" :label="t('cms.model.field.imageHeight')">
      <el-input-number v-model="field.imageHeight" :min="1" :max="65535" />
    </el-form-item>
  </template>
  <template v-if="['imageUpload', 'videoUpload', 'audioUpload', 'fileUpload'].includes(field.type)">
    <el-form-item prop="fileAccept">
      <template #label
        ><label-tip
          message="cms.model.field.fileAccept.label"
          tooltip="cms.model.field.fileAccept.tooltip"
          help
          :fix-width="false"
      /></template>
      <el-input v-model="field.fileAccept" maxlength="255" />
    </el-form-item>
    <el-form-item
      prop="fileMaxSize"
      :rules="{
        type: 'number',
        min: 0,
        max: 65535,
        message: () => t('cms.rule.range', { min: 0, max: 65535 })
      }"
    >
      <template #label
        ><label-tip
          message="cms.model.field.fileMaxSize.label"
          tooltip="cms.model.field.fileMaxSize.tooltip"
          help
          :fix-width="false"
      /></template>
      <el-input v-model.number="field.fileMaxSize" maxlength="5" />
    </el-form-item>
  </template>
  <template v-if="['editor'].includes(field.type)">
    <el-form-item prop="minHeight" :label="t('cms.model.field.minHeight')">
      <el-input-number v-model="field.minHeight" :min="1" :max="65535" />
    </el-form-item>
    <el-form-item prop="maxHeight" :label="t('cms.model.field.maxHeight')">
      <el-input-number v-model="field.maxHeight" :min="1" :max="65535" />
    </el-form-item>
    <el-form-item prop="maxHeight" :label="t('cms.model.field.editorType.label')">
    <el-select
      v-model="field.editorType"
      class="w-full"
    >
      <el-option
        v-for="n in [1,2,3]"
        :key="n"
        :value="n"
        :label="$t(`cms.model.field.editorType.${n}`)"
      />
    </el-select>
  </el-form-item>
  </template>
</template>
<script lang="ts" setup>
import { ref, toRefs, watchEffect } from 'vue'
import { getDictTypes, getStrDictOptions } from '@/utils/dict'
import LabelTip from '@/components/cms/LabelTip.vue'
const { t } = useI18n() // 国际化
const props = defineProps({ selected: { type: Object, required: true } })
const { selected: field } = toRefs(props)
const dictTypeList = ref<any[]>([])
const dictList = ref<any[]>([])
watchEffect(async () => {
  if (field.value.type === 'date' && !field.value.dateType) {
    field.value.dateType = 'date'
  }
  if (field.value.type === 'switch' && !field.value.inactiveValue) {
    field.value.inactiveValue = '0'
  }
  if (field.value.type === 'switch' && !field.value.activeValue) {
    field.value.activeValue = '1'
  }
  if (['radio', 'checkbox'].includes(field.value.type) && !field.value.checkStyle) {
    field.value.checkStyle = 'default'
  }
  if (['checkbox', 'multipleSelect'].includes(field.value.type) && !field.value.defaultValue) {
    field.value.defaultValue = []
  }
  if (['checkbox', 'multipleSelect'].includes(field.value.type)) {
    field.value.multiple = true
  }
  if (['radio', 'checkbox', 'select', 'multipleSelect'].includes(field.value.type)) {
    //只要CMS相关的就行
    dictTypeList.value = await getDictTypes('cms_')
  }
})
watchEffect(async () => {
  if (field.value.dictType != null) {
    dictList.value = await getStrDictOptions(field.value.dictType)
  }
})
const dictTypeChange = async () => {
  field.value.defaultValue = field.value.multiple ? [] : undefined
  field.value.defaultValueKey = field.value.multiple ? [] : undefined
}
</script>

<!--
      { label: '单行文本', type: 'text' },
      { label: '多行文本', type: 'textarea' },
      { label: '计数器', type: 'number' },
      { label: '日期选择器', type: 'date' },
      { label: '颜色选择器', type: 'color' },
      { label: '滑块', type: 'slider' },
      { label: '单选框组', type: 'radio' },
      { label: '多选框组', type: 'checkbox' },
      { label: '下拉单选', type: 'select' },
      { label: '下拉多选', type: 'multipleSelect' },
      { label: '级联选择', type: 'cascader' },
      { label: '开关', type: 'switch' },
      { label: '富文本编辑器', type: 'editor' },
      { label: '图片上传', type: 'imageUpload' },
      { label: '视频上传', type: 'videoUpload' },
      { label: '音频上传', type: 'audioUpload' },
      { label: '文件上传', type: 'fileUpload' },
-->
